<template>
  <div v-if="!loading" class="container">
    <a-space class="actions">
      <a-space>
        <a-button size="small" :icon="h(FullscreenOutlined)" @click="handleExpand">展开 / 折叠</a-button>
        <a-button size="small" :icon="h(ExpandOutlined)" @click="handleFullScreen">全屏</a-button>
        <a-button size="small" :icon="h(PaperClipOutlined)" @click="handleDownload">下载</a-button>
      </a-space>
      <a-space>
        <a-button v-if="!caseDetail.isCollect" size="small" :icon="h(HeartOutlined)" @click="handleCollect">收藏</a-button>
        <a-button v-else size="small" danger @click="handleUncollect">
          <template #icon>
            <heart-outlined style="color: #fd394c" />
          </template>
          取消收藏
        </a-button>
      </a-space>
    </a-space>

    <h1 class="title">{{ caseDetail.name }}</h1>
    <!-- 药膳类型 -->
    <div class="main-info">
      <span>[药膳类型]</span>
      <p v-html="caseDetail.Medifood_classify"></p>
    </div>
    <!-- 药膳配方  -->
    <div class="main-info">
      <span>[配方]</span>
      <p v-html="caseDetail.Medifood_recipe"></p>
    </div>

    <!-- 药膳详情
    <a-collapse v-model:activeKey="expandKeys" :bordered="false">
      <template #expandIcon="{ isActive }">
        <caret-right-outlined :rotate="isActive ? 90 : 0" />
      </template>
      <a-collapse-panel v-for="(value, key) in keyMap" :key="key" :header="value" :style="customStyle">
        <p v-html="caseDetail[key]"></p>
      </a-collapse-panel>
    </a-collapse> -->

    <!-- 药膳详情 -->
    <a-collapse v-model:activeKey="expandKeys" :bordered="false">
      <template #expandIcon="{ isActive }">
        <caret-right-outlined :rotate="isActive ? 90 : 0" />
      </template>
      <a-collapse-panel v-for="(value, key) in keyMap" :key="key" :header="value" :style="customStyle">
        <template v-if="key === 'thumbs'">
          <!-- 仅当key为'thumbs'时，显示图片 -->
          <img :src="caseDetail.thumbs" alt="药膳图片" v-if="caseDetail.thumbs" :style="{ width: '200px', height: 'auto' }" />
        </template>
        <template v-else-if="key === 'video'">
          <!-- 仅当key为'video'时，显示视频 -->
          <video controls :src="caseDetail.video" width="640" height="360" v-if="caseDetail.video">
            您的浏览器不支持 video 标签。
          </video>
        </template>
        <template v-else>
          <!-- 对于其他非图片的key，继续使用v-html展示 -->
          <p v-html="caseDetail[key]"></p>
        </template>
      </a-collapse-panel>
    </a-collapse>
  </div>
  <LoadingSkeketon v-else />
</template>

<script setup lang="ts">
import { onMounted, ref, watch, h } from "vue"
import { notification } from "ant-design-vue"
import { CaretRightOutlined, ExpandOutlined, PaperClipOutlined, FullscreenOutlined, HeartOutlined } from "@ant-design/icons-vue"
import useLoading from "@/hooks/loading"
import { collectCase, unCollectCase, getCaseInfo } from "@/api/case/index"
import { useUserStore } from "@/store"

const props = defineProps({
  id: {
    type: String,
    default: ""
  }
})

const emits = defineEmits(["fullScreen", "collect", "uncollect"])
watch(
  () => props.id,
  newVal => {
    if (newVal != "") {
      getCaseDetail()
    }
  }
)

const userStore = useUserStore()

const customStyle = "background: #f2f3f5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden"
const keyMap = {
  // name: "药膳名称",
  // classification_id: "分类",
  // Medifood_recipe?: string
  // desc: "基本描述",
  thumbs: "图片",
  video: "视频",
  indication: "适应症",
  Medifood_usage: "用法",
  treated_disease: "治疗疾病",
  Medifood_aroma: "药膳香味",
  Medifood_color: "药膳颜色",
  Medifood_flavor: "药膳味道",
  Associated_symptoms: "关联症状",
  Edible_method: "食用方法",
  treatment_site: "治疗部位"
}

let expandKeys = ref<string[]>(Object.keys(keyMap))
const handleExpand = () => {
  if (!expandKeys.value.length) {
    expandKeys.value = Object.keys(keyMap)
  } else {
    expandKeys.value = []
  }
}

const caseDetail = ref<any>({})
const { loading, setLoading } = useLoading(true)
const getCaseDetail = async () => {
  try {
    let res = await getCaseInfo(props.id)
    caseDetail.value = res.data
  } finally {
    setLoading(false)
  }
}

onMounted(() => {
  getCaseDetail()
})

const handleFullScreen = () => {
  emits("fullScreen")
}

const handleDownload = () => {
  notification.warning({
    message: '"药膳导出功能暂未开放！"'
  })
}

const handleCollect = () => {
  collectCase(userStore.id!, caseDetail.value._id).then(() => {
    getCaseDetail()
    emits("collect")
    notification.success({
      message: "收藏成功"
    })
  })
}

const handleUncollect = () => {
  unCollectCase(userStore.id!, caseDetail.value._id).then(() => {
    getCaseDetail()
    emits("uncollect")
    notification.success({
      message: "取消收藏成功"
    })
  })
}
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
